<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-row type="flex">
          <!-- <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662792353&t=b0ddeb89b83789e1c53b71e64ca80e8c"
            style="width: 100px; height: 100px; border-radius: 50%"
          /> -->
          <img
            :src="staffPhoto"
            style="width: 100px; height: 100px; border-radius: 50%"
          />
          <div class="header">
            <h4>欢迎{{ name }},登录，祝你开心每一天</h4>
            <p>{{ name }} | xxxx-{{ departmentName }}</p>
          </div>
        </el-row>
      </el-card>

      <el-row type="flex">
        <el-col :span="12">
          <el-card style="margin: 15px 15px 0 0">
           <calendar/>
          </el-card>
          <el-card style="margin: 15px 15px 0 0">
            <div class="title">公告</div>
            <el-divider />
            <div>
              2
              <el-divider />
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card style="margin: 15px 0 15px 0">
            <div class="process-title">流程申请</div>
            <el-button>加班离职</el-button>
            <el-button>请假调休</el-button>
            <el-button>审批列表</el-button>
            <el-button>我的信息</el-button>
          </el-card>
          <el-card>
            <div class="point-title">绩效指数</div>
          </el-card>
          <el-card>
            <div class="process-title">帮助链接</div>
            <div class="sprite">
              <a href="https://element.eleme.cn/#/zh-CN/component/divider"></a>
              <a href=""></a>
              <a href=""></a>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Calendar from "@/components/calendar";

export default {
  name: "Dashboard",
  components:{
    Calendar
  },
  computed: {
    ...mapGetters(["name", "staffPhoto", "departmentName"]),
  },
  data() {
    return {
    };
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 16px;
    line-height: 14px;
  }
}
.dashboard-text {
  .header {
    margin-left: 20px;
  }
  .process-title {
    font-size: 20px;
    width: 80px;
    line-height: 30px;
    border-bottom: 3px solid #b1b9fa;
    margin-bottom: 20px;
  }
  .title,
  .point-title {
    font-size: 20px;
    width: 80px;
    line-height: 30px;
    margin-bottom: 20px;
  }
  .sprite {
    display: flex;
    justify-content: space-around;
    a {
      width: 70px;
      height: 70px;
      background-color: pink;
      display: inline-block;
    }
    a:nth-child(1) {
      background: url("~@/assets/common/icon.png");
      background-position: 0 -7px;
    }
    a:nth-child(2) {
      background: url("~@/assets/common/icon.png");
      background-position: -224px -7px;
    }
    a:nth-child(3) {
      background: url("~@/assets/common/icon.png");
      background-position: -463px -5px;
    }
  }

}
</style>
